<style scoped>
    .zbtx_box{
        width: 100%;
        height: 100%;
    }
    .zbtx_box_top{
        width:100%;
        height:8.4vh;
        padding-left: 2.8vh;
        padding-right: 2.9vh;
        margin-bottom: 2vh;
        display: flex;
        justify-content: space-between;
    }
 .zbtx_box_bottom{
        width:100%;
         height:55.6vh;
         overflow: hidden;
    }
 .card_box{
   position: relative;
   width:calc(100% / 3 - 1.5vh);
   height: 100%;
   border-radius: 8px;
   padding: 0.8vw 2vh;
   padding-top: 1vw;
   color:#333333
   
}
.img_box{
    width: 2.5vw;
    height: 4.4vh;
    position: absolute;
    top: 0;
    bottom: 0;
    right:2.5vw;
    margin: auto;
}
.card_title{
  font-size:1.6vh;
  margin-bottom: .5vh;
}
.card_unit{
    font-size:1.6vh;
    margin-left: .4vh;
}
.card_nums{
    font-size: 2.4vh;
    font-weight: 700;
}
.card_color1{
    background: linear-gradient(-90deg,#FEF3E9 0%, #FEF3E9 100%);
}
.card_color2{
    background: linear-gradient(90deg,#E7EEFB 0%, #E7EEFB 100%);
}
.card_color3{
    background: linear-gradient(-90deg,#EAF5F4 0%, #EAF5F4 100%);
}
.card_color4{
    background: linear-gradient(-90deg,#4781f0 0%, #886df8 100%);
}
.application{
    width: 100%;
    height: 100%;
}
.numColor0{
   color:#FF8126;
}
.numColor1{
   color:#1492FF
}
.numColor2{
   color:#2DAE94
   }
   .totalColor{
       color:#666666;
       margin-left: .5vh;
   }
</style>
<template>
    <div class="zbtx_box">
      <div class="zbtx_box_top">
            <div class="card_box" :class="['card_color'+(i+1)]" v-for="(item,i) in data" :key="i">
           <div class="card_title">{{item.name}}</div>
           <div><i class="card_nums" :class="['numColor'+i]">{{item.value}}</i><i v-if="item.total" class="totalColor">/ {{item.total}}</i><i class="card_unit">{{item.unit}}</i></div>
           <div class="img_box"><img :src="item.imgUrl" alt=""></div>
       </div>
      </div>
      <div class="zbtx_box_bottom" v-if="barDatas.length>0">
           <div class="box_con h_100">
                <div class="title_con">各区县完成情况</div>
                <div class="application">
                    <avue-echart-percentBarList :option="{color:'#FF8126',chartId:'app'}" :data="barDatas" width="100%" height="100%" ></avue-echart-percentBarList> 
                </div>
           </div>
      </div>
    </div>
</template>
<script>
export default {
    name:"txZbtx",
    props:{
       data:Array,
       barDatas:Array,
    }
}
</script>